<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.101.0">
  <title>Manage Page</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/dashboard/">



  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">



  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="./css/manager.css" rel="stylesheet">
</head>

<body>

  <!-- 导航栏 -->
  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">MicroMQ by 刘天岳</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
      data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" href="#" onclick="logout()">Sign out</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <!-- 左侧菜单 -->
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="sidebar-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#" id="virtual-host" onclick="chooseMenu(this)">
                <span data-feather="home"></span>
                Virtual Hosts
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" id="exchange" onclick="chooseMenu(this)">
                <span data-feather="layers"></span>
                Exchanges
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" id="message-queue" onclick="chooseMenu(this)">
                <span data-feather="layers"></span>
                Message Queues
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" id="binding" onclick="chooseMenu(this)">
                <span data-feather="layers"></span>
                Bindings
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" id="message" onclick="chooseMenu(this)">
                <span data-feather="file-text"></span>
                Messages
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- 右侧主界面 -->
      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        <h2 id="main-title">title</h2>
        <div class="table-responsive" id="data-content">
          
        </div>
      </main>
    </div>
  </div>

  <script src="./js/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  <script src="./js/manager.js"></script>
  <script>
    function setMainContent(mainTitle, headLine, urlPath, onSuccess) {
      $("#main-title").html(mainTitle);
      $("#data-content").append("<table class='table table-striped table-sm' id='main-content'></table>");
      $("#main-content").append(headLine);
      $.ajax({
        type: "get",
        url: urlPath,
        success: onSuccess
      });
    }

    defaultMainContent();
    function defaultMainContent() {
      let headLine = "";
      headLine += "<thead><tr>";
      headLine += "<th>name</th>";
      headLine += "<th>state</th>";
      headLine += "</tr></thead>";
      setMainContent("Virtual Hosts", headLine, "/manager/virtual-host", function (result) {
        if(!isResultValid(result)) return;
        let finalHtml = "";
        finalHtml += "<tbody><tr>";
        finalHtml += "<td>" + result.data + "</td>";
        finalHtml += "<td>running</td>";
        finalHtml += "</tr></tbody>";
        $("#main-content").append(finalHtml);
      });
    }

    function isResultValid(result) {
      if (result != null && result.code === 200 && result.data != null) {
        return true;
      } else {
        if (result === null) {
          alert("result is null");
          return false;
        } else {
          alert(result.message);
          return false;
        }
      }
    }

    function chooseMenu(menu) {
      let menus = document.querySelectorAll('.nav-link'); //获取所有的nav-link元素
      menus.forEach(m => m.classList.remove('active')); //移除所有nav-link元素的active类
      menu.classList.add('active'); //为当前点击的nav-link元素添加active类
      $("#data-content").html("");

      if (menu.id === "virtual-host") {
        defaultMainContent();

      } else if (menu.id === "exchange") {
        let headLine = "";
        headLine += "<thead><tr>";
        headLine += "<th>name</th>";
        headLine += "<th>type</th>"
        headLine += "<th>durable</th>"
        headLine += "<th>auto delete</th>"
        headLine += "</tr></thead>";
        setMainContent("Exchanges", headLine, "/manager/exchange", function (result) {
          if(!isResultValid(result)) return;
          let exchanges = result.data;
          let finalHtml = "";
          for (let exchange of exchanges) {
            let exchangeType = ["unknown-type", "direct", "fanout", "topic"];
            finalHtml += "<tbody><tr>";
            finalHtml += "<td>" + exchange.name + "</td>";
            finalHtml += "<td>" + exchangeType[exchange.type] + "</td>";
            finalHtml += "<td>" + exchange.durable + "</td>";
            finalHtml += "<td>" + exchange.autoDelete + "</td>";
            finalHtml += "</tr></tbody>";
          }
          $("#main-content").append(finalHtml);
        });

      } else if (menu.id === "message-queue") {
        let headLine = "";
        headLine += "<thead><tr>";
        headLine += "<th>name</th>";
        headLine += "<th>durable</th>"
        headLine += "<th>exclusive</th>"
        headLine += "<th>auto delete</th>"
        headLine += "</tr></thead>";
        setMainContent("Message Queues", headLine, "/manager/message-queue", function (result) {
          if(!isResultValid(result)) return;
          let msgQueues = result.data;
          let finalHtml = "";
          for (let msgQueue of msgQueues) {
            finalHtml += "<tbody><tr>";
            finalHtml += "<td>" + msgQueue.name + "</td>";
            finalHtml += "<td>" + msgQueue.durable + "</td>";
            finalHtml += "<td>" + msgQueue.exclusive + "</td>";
            finalHtml += "<td>" + msgQueue.autoDelete + "</td>";
            finalHtml += "</tr></tbody>";
          }
          $("#main-content").append(finalHtml);
        });

      } else if (menu.id === "binding") {
        let headLine = "";
        headLine += "<thead><tr>";
        headLine += "<th>exchange name</th>";
        headLine += "<th>message queue name</th>"
        headLine += "<th>binding key</th>"
        headLine += "<th>durable</th>"
        headLine += "</tr></thead>";
        setMainContent("Bindings", headLine, "/manager/binding", function (result) {
          if(!isResultValid(result)) return;
          let bindings = result.data;
          let finalHtml = "";
          for (let binding of bindings) {
            finalHtml += "<tbody><tr>";
            finalHtml += "<td>" + binding.exchangeName + "</td>";
            finalHtml += "<td>" + binding.msgQueueName + "</td>";
            finalHtml += "<td>" + binding.bindingKey + "</td>";
            finalHtml += "<td>" + binding.durable + "</td>";
            finalHtml += "</tr></tbody>";
          }
          $("#main-content").append(finalHtml);
        });

      } else if (menu.id === "message") {
        $("#main-title").html("Messages");
        $("#data-content").append("<div class='accordion' id='accordionExample'></div>");
        $.ajax({
          type: "get",
          url: "/manager/message",
          success: function(result) {
            if(result != null && result.code === 200 && result.data != null) {
              let centers = result.data;
              for(let center of centers) {
                let msgQueueName = center.msgQueueName;
                let tableId = "main-content" + globleTableId++;
                let cardHtml = "";
                cardHtml += "<div class=\"card\"><div class=\"card-header\" id=\"heading\"><h2 class=\"mb-0\">";
                cardHtml += "<button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse" + tableId +"\" aria-expanded=\"true\" aria-controls=\"collapse\">";
                cardHtml += msgQueueName;
                cardHtml += "</button></h2></div>";
                cardHtml += "<div id=\"collapse" + tableId +"\" class=\"collapse\" aria-labelledby=\"heading\" data-parent=\"#accordionExample\">";
                cardHtml += "<div class=\"card-body\"><table class=\"table table-striped table-sm\" id=\"" + tableId + "\">";
                cardHtml += "</table></div></div></div>";
                $("#accordionExample").append(cardHtml);

                let messages = center.messages;
                let tableHtml = "";
                tableHtml += "<thead><tr>";
                tableHtml += "<th>id</th>";
                tableHtml += "<th>delivery mode</th>"
                tableHtml += "<th>routing key</th>"
                tableHtml += "<th>content</th>"
                tableHtml += "</tr></thead>";
                for(let message of messages) {
                  let messageMode = ["unknown-mode", "undurable", "durable"];
                  tableHtml += "<tbody><tr>";
                  tableHtml += "<td>" + message.id + "</td>";
                  tableHtml += "<td>" + messageMode[message.mode] + "</td>";
                  tableHtml += "<td>" + message.routingKey + "</td>";
                  tableHtml += "<td>" + message.content + "</td>";
                  tableHtml += "</tr></tbody>";
                }
                $("#" + tableId).append(tableHtml);
              }
            } else {
              if (result === null) {
                alert("result is null");
                return false;
              } else {
                alert(result.message);
                return false;
              }
            }
          }
        });
      }
    }
    let globleTableId = 1;

    function logout() {
      location.href = "login.html";
    }
  </script>
</body>

</html>